<!--学籍导入-->
<template>
    <div class="wrapper-container">
        <div class=" chose">
            <span class="label-name">步骤 ：</span>
            <div class="importClass">
            <el-upload ref="upload"
                    action="string"
                    :show-file-list="false"
                    :http-request="upLoadApi"
                    accept=".xls,.xlsx"
                    :on-change="fileInfo"
                    :auto-upload="false" >
                    <span class="red">上传数据文件</span>
                </el-upload>
                <span>-检查数据&导入</span>
            </div>
        </div>
        <div class="chose">
            <span class="label-name">请选择数据文件 ：</span>
            <div class="flex">
                <div class="flex" >
                    <el-input class="width191 right20" v-model="fileName" disabled></el-input>
                    <div class="search-button color-primary right30 width70" @click="uploadFWQ">
                        <img src="../../../../assets/assessment/icon-import-blue.png" alt="" />
                        <span>导入</span>
                    </div>
                    <div class="search-button color-warning width160" @click="downloadFile">
                        <img src="../../../../assets/assessment/icon-import-orange.png" alt="" />
                        <span>下载数据模板文件</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
        fileName:'',
    };
  },
  methods: {
    fileInfo(file){
        if(file.name.indexOf("xlsx") == -1 && file.name.indexOf("xls") == -1){
            this.$message.error('请上传excl文件');
        }else{
            this.fileName = file.name;
        }
    },
    upLoadApi(item){
        let formData = new FormData();
        formData.append('file', item.file);
        let requestUrl = this.$store.state.studentUrl.baseUrl+'/sysStudentStatus/importExcel';
        Axios.post(requestUrl,formData).then(res => {
            if(res.data.success){
                this.$router.push({path:'/student/studentStatus/registerList/registerList'})
            }
        }).catch(error => {
            this.$message.error('上传失败');
        })
    },
    uploadFWQ(){
        this.$refs.upload.submit();
    },
    //文件下载
    downloadFile(){
        let data = {fileModelName:'StudentStatus'}
        Axios({
            method: 'get',
            url: this.$store.state.studentUrl.baseUrl+'/downloadModelFile',
            params:data,
            headers: {'Content-Type': 'application/octet-stream' },
                responseType: 'blob'
        }).then(res => {
            fileDownload(res.data, '学籍注册数据模板.xlsx');
        });  
    }
  },
};
</script>

<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.right20{margin-right: 20px;}
.right30{margin-right: 30px;}
.width160{width: 160px;}
.width191{
    width: 191px;
    /deep/.el-input__inner{
        height: 27px;
        line-height: 27px;
    }
}
.width70{width: 70px;}
.importClass{
    display: flex;
    align-items: center;
    color: #004CA7;
    .red{
        color: #FF3819;
        cursor: pointer;
        margin-right:14px;
    }
}
.wrapper-container{width: 100%;}
.chose{
    margin-top: 25px;
    display: flex;
    align-items: center;
    .flex{
        display: flex;
        align-items: center;
    }
    .label-name{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0px;
        color: #004CA7;
    }
}
.color-warning{
    background: #FEF1E8;
    border: 1px solid #F86900;
    >span{color: #F86900;}
}
</style>
